<template>
  <div>
    <el-container>
      <el-header height="100px" style="background-color: cadetblue">
        <div class="head">
          <div class="title-box">
            <h2 class="title">车辆租赁信息后台</h2>
          </div>
          <div class="login">
            <el-avatar size="default" style="margin-left: 15px; margin-top: 20px; margin-bottom: 3px"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <div>
              <el-popover placement="top-start" title="当前状态：已登录" :width="160" trigger="hover">
                <label @click="exit" style="color: red">点击退出</label>
                <template #reference>
                  <el-button class="m-2">已登录</el-button>
                </template>
              </el-popover>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <Menu :exit="exit"></Menu>
        </el-aside>
        <el-main class="main">
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import Menu from "../menu/menu.vue";
import { ElMessage } from "element-plus";
const router = useRouter();
function exit() {
  router.push("/");
  ElMessage.success("退出成功");
}
</script>
<style scoped>
.main {
  margin: 0;
  padding: 0;
}

.head {
  display: flex;
  width: 100%;
  height: 100%;
}

.title-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.title {
  font-size: 50px;
  font-family: "楷体";
  color: white;
}

.login {
  position: absolute;
}
</style>
